<template>
  <div class="loginbox">
    <div :class="classListActive ? 'container right-panel-active' : 'container'">
      <!-- Sign Up -->
      <div class="container__form container--signup">
        <form action="" class="form">
          <h2 class="form__title">注 册</h2>
          <input v-model="username" type="text" placeholder="昵称" class="input" />
          <input v-model="password" type="password" placeholder="Password" class="input" />
          <button class="btn" type="button" @click="signupSubmit">注 册</button>
        </form>
      </div>

      <!-- Sign In -->
      <div class="container__form container--signin">
        <form action="" class="form">
          <h2 class="form__title">登 录</h2>
          <input v-model="username" type="text" placeholder="昵称" class="input" />
          <input v-model="password" type="password" placeholder="Password" class="input" />
          <button class="btn" type="button" @click="signinSubmit">登 录</button>
          <el-link type="primary">忘记密码？</el-link>
        </form>
      </div>

      <!-- Overlay -->
      <div class="container__overlay">
        <div class="overlay">
          <div class="overlay__panel overlay--left">
            <button class="btn" @click="signIn">登 录</button>
          </div>
          <div class="overlay__panel overlay--right">
            <button class="btn" @click="signUp">注 册</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { login, register } from '@/api/login'
import { ElMessage } from 'element-plus'
export default {
  name: 'login',
  setup(props, ctx) {
    let classListActive = ref(true)
    let username = ref('')
    let password = ref('')
    const router = useRouter()

    const signupSubmit = async () => {
      const res = await register({ username: username.value, password: password.value })
      ElMessage.success(res.message)
    }
    const signinSubmit = async () => {
      console.log(username.value, password.value)
      const res = await login({ username: username.value, password: password.value })
      ElMessage.success(res.message)
      router.push('/')
      return false
    }
    const clearInput = () => {
      username.value = ''
      password.value = ''
    }
    const signIn = () => {
      clearInput()
      classListActive.value = false
    }
    const signUp = () => {
      clearInput()
      classListActive.value = true
    }

    return {
      classListActive,
      username,
      password,
      signupSubmit,
      signinSubmit,
      signIn,
      signUp
    }
  }
}
</script>

<style scoped>
@import '../../static/css/login.css';
</style>
